Skip to content

[PM-41829] Login Buttons Overlap Owner and Name Elements When Resizing Browser - #22418

Open
jengstrom-bw wants to merge 2 commits into
mainfrom
vault/pm-40548/login-buttons-overlap-owner-and-name-elements
Open

[PM-41829] Login Buttons Overlap Owner and Name Elements When Resizing Browser#22418
jengstrom-bw wants to merge 2 commits into
mainfrom
vault/pm-40548/login-buttons-overlap-owner-and-name-elements

Conversation

@jengstrom-bw

@jengstrom-bw jengstrom-bw commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-41829

📔 Objective

When shrinking the browser window, the login button elements overlap the Name and Owner elements. This PR fixes the column width when the quick copy actions are enabled.

📸 Screenshots

Screen.Recording.2026-08-13.at.2.06.14.PM.mov

@jengstrom-bw jengstrom-bw added ai-review-vnext Request a Claude code review using the vNext workflow t:bugfix Change Type - Bugfix labels Aug 13, 2026
@github-actions

github-actions Bot commented Aug 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

🤖 Bitwarden Claude Code Review

Overall Assessment: APPROVE

This bugfix replaces the inline ngClass width expression on the vault items options column header with an optionsColumnWidthClass() helper, widening the column to tw-w-48 when the per-field quick copy icons are shown and tw-w-32 for the combined copy menu, while preserving the existing tw-w-24 / tw-w-12 behavior when copy and launch actions are disabled. VaultCopyButtonsService is injected via inject() and combined with the PM40435_QuickCopyIconSetting flag, mirroring the pattern already established in vault-cipher-row.component.ts. Test providers were added to both specs that instantiate the component, and unit tests cover the three width branches. No security, correctness, or breaking-change concerns were identified.

Code Review Details

No findings met the confidence threshold for posting.

Notes considered and dropped as non-issues:

  • The widened column also applies when the batch bar is enabled (tw-w-28 → tw-w-32/tw-w-48); this matches the prior precedence where the copy/launch branch won over the batch bar branch.
  • tw-w-48 (192px) accommodates the maximum quick copy layout — three icons for a login plus the launch button and the options menu — consistent with the recorded verification in the PR description.
  • VaultCopyButtonsService is providedIn: "root". The only two specs that instantiate VaultItemsComponent were updated; the organization collections vault spec calls overrideTemplate(VaultComponent, ""), so it never renders the child component.
  • Tailwind's web config scans ./src/**/*.{html,ts,mdx}, so the class literals returned from the helper are not purged.
  • optionsColumnWidthClass reads batchBarService?.enabled() internally rather than as a parameter. Signal reads inside a method invoked from the template remain tracked, matching the prior inline expression's behavior.

@codecov

codecov Bot commented Aug 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 66.66667% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.92%. Comparing base (7fc22e3) to head (432dbbb).
⚠️ Report is 10 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...lt/components/vault-items/vault-items.component.ts 66.66% 0 Missing and 2 partials ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##             main   #22418      +/-   ##
==========================================
+ Coverage   53.84%   53.92%   +0.07%     
==========================================
  Files        4293     4297       +4     
  Lines      136324   136506     +182     
  Branches    21546    21572      +26     
==========================================
+ Hits        73410    73616     +206     
+ Misses      57551    57522      -29     
- Partials     5363     5368       +5

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jengstrom-bw
jengstrom-bw marked this pull request as ready for review August 14, 2026 15:20
@jengstrom-bw
jengstrom-bw requested a review from a team as a code owner August 14, 2026 15:20
@jengstrom-bw
jengstrom-bw requested a review from nikwithak August 14, 2026 15:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nick-livefront nick-livefront nick-livefront approved these changes
@nikwithak nikwithak Awaiting requested review from nikwithak nikwithak is a code owner automatically assigned from bitwarden/team-vault-dev

Assignees

No one assigned

Labels

ai-review-vnext Request a Claude code review using the vNext workflow t:bugfix Change Type - Bugfix

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@jengstrom-bw @nick-livefront